<!DOCTYPE html>
{% csrf_token %}
<html lang="en">
{% include "./_pub_header.html" %}

<body>
{% include "./_pub_body.html" %}
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div class="container">
  <h2>代码部署</h2>
<!--  <p>Contextual classes can be used to color table rows or table cells. The classes that can be used are: .active, .success, .info, .warning, and .danger.</p> -->
<form id="deploy_form" class="form-horizontal"  method="post">
  {% csrf_token %}
  <label class="control-label inline" for="scm_type">
    GIT/SVN
  </label>
  <input type="text" name="scm_type" class="form-control" value="git" required="required">
  <label class="control-label" for="scm_url">
    GIT/SVN URL
  </label>
  <input type="text" name="scm_url" class="form-control" required="required">
  <span class="help-block">Example: git@git.oschina.net:learn0208/ansible_webadmin.git</span>
  <label class="control-label" for="scm_branch">
    SCM 分支
  </label>
  <input type="text" name="scm_branch" class="form-control" value="master" required="required">
  <label class="control-label" for="deploy_action">
    部署/回滚
  </label>
  <select type="text" name="scm_action" class="form-control">
    <option value="deploy">deploy</option>
    <option value="rollback">rollback</option>
  </select>
  <label class="control-label" for="deploy_host">
    项目名
  </label>
  <select type="text" name="scm_project" class="form-control">
    <option value="wcat">wcat</option>
    <option value="nbf">nbf</option>
  </select>
  <br>
  <div class="controls">
    <button id="submit" class="btn btn-info">提交</button>
    <button type="reset" class="btn btn-info">重置</button>
  </div>
</form>

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
  
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">deploy log</h4>
      </div>
      <div class="modal-body">
        <textarea name="msg" id="msg" class="form-control" rows="15"></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
    
  </div>
</div>
          


<script type="text/javascript">
  $(function () { 
    $('#myModal').modal({
      keyboard: true,
      show: false
    })

    $('#myModal').on('hidden.bs.modal', function() {
      clearInterval(sint);
    }),

    $('#myModal').on('show.bs.modal', function() {
      sint=setInterval("refreshOnTime()", 2000);
    })

  });

/*
  function deploy_save(){
    document.deploy_form.action="/deploy_to";
    document.deploy_form.target="deploy_render()";
    document.deploy_form.submit();
    //document.deploy_form.target="HiddenIframe";
  }
*/

  function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
  }

  $("#submit").click(function(e){
    e.preventDefault();
    var csrftoken = getCookie('csrftoken');

    $.ajax({
      url: "/deploy_to",
      type: "POST",
      data: $("#deploy_form").serialize(),
      success: function(data){
        $("#myModal").modal('show');
      },
      error: function(xhr, errmsg, err) {
        console.log(xhr.status + ": " + xhr.responseText);
      }
    })
  })

  function refreshOnTime(){
      $.ajax({
        type: "GET",
        url: "/output",
        success: function(response){
          $("textarea#msg").val(response);
        }
      });
  }

  function deploy_refresh(){
    //间隔2秒执行一次
    sint=setInterval("refreshOnTime()", 2000);
  }

/*
$(document).ready(function() {
  $('#msg').click(function() {
    $.ajax({ 
      type: "GET", 
      url: "/output",//get response from this file
      success: function(response){ 
      $("textarea#msg").val(response);//send response to textarea
    }
  })
    setInterval('refreshOnTime', 1000);;
  });
});
*/
</script>

</div>

</div>
</body>
</html>
